<template>
  <div class="center">
    <!--    用户头像上传-->
    <div>
      <el-row>
        <el-col :span="10">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            list-type="picture-card"
            :on-change="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            action=""
          >
            <img v-if="this.imageUrl" :src="this.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="14">
          <div>
            <el-alert
              v-if="this.imageUrl"
              title="请点击上传按钮上传新的头像"
              type="success"
              :closable="false"
              description="上传后会立即更新"
              show-icon
            >
            </el-alert>
            <el-alert
              v-else
              title="点击左侧上传框上传头像"
              type="warning"
              :closable="false"
              description="只能上传jpg/png文件，且不超过 2MB！"
              show-icon
            >
            </el-alert>
          </div>
          <!--    更新头像按钮-->
          <el-button
            size="small"
            type="primary"
            style="margin-top:20px"
            @click="uploadIcon"
          >
            上传图片
          </el-button>
        </el-col>
      </el-row>

      <div class="text item">
        <el-form
          :model="user"
          ref="ruleForm"
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名：">
            {{ user.name }}
          </el-form-item>
          <el-form-item label="电话：" required>
            <el-input v-model="user.tel"></el-input>
          </el-form-item>

          <el-form-item label="邮箱：" required>
            <el-input v-model="user.mail" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="生日：" required>
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="user.birth"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="性别：" required>
            <el-radio-group v-model="user.gender">
              <el-radio :label="0">
                男
              </el-radio>
              <el-radio :label="1">
                女
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">修改信息</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import userApi from "../../../api/user";
export default {
  name: "Modify",
  data() {
    return {
      user: {},
      headUrl: null,
      imageUrl: "",
      file: null
    };
  },
  methods: {
    ...mapMutations([
      "activeIndexUpdate",
      "navmenuIndexUpdate",
      "UpdateImgUrl"
    ]),
    async submitForm() {
      const time = new Date(this.user.birth);
      let y = time.getFullYear();
      let MM = time.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = time.getDate();
      d = d < 10 ? "0" + d : d;
      const newtime = y + "-" + MM + "-" + d;
      let data = {
        mail: this.user.mail,
        birth: newtime,
        gender: this.user.gender,
        tel: this.user.tel
      };
      // 如果没有修改值，则不传递,尚未完成
      const ret = await userApi.updateUserInfo(data);
      if (ret.code === 0) {
        this.$message.success("修改成功！");
        setTimeout(() => {
          this.$router.push("/info/personal/information");
        }, 0);
      }
    },
    // 图片上传和验证
    handleAvatarSuccess(file, fileList) {
      console.log(fileList, "list");
      this.file = file;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // if (isJPG || isLt2M) {
      //   return isJPG && isLt2M;
      // }
      return false;
    },
    // 头像上传的axios请求
    async uploadIcon() {
      if (!this.file) {
        this.$message({
          message: "请先点击左侧图片框,上传图片后提交",
          type: "warning"
        });
        return;
      }
      let formData = new FormData();
      formData.append("file", this.file.raw);
      const data = await userApi.uploadIcon(formData);
      console.log(data);
      this.UpdateImgUrl(data.data);
      if (data.code === 1) {
        this.$message.success("头像上传成功!");
      }
    }
  },
  async mounted() {
    this.activeIndexUpdate("/info/personal");
    this.navmenuIndexUpdate("/info/personal/modify");
    const sy = await userApi.userinfo();
    this.user = sy.data;
    this.headUrl = this.user.iconPath;
  }
};
</script>

<style scoped>
.box-card {
  width: 480px;
}
.text {
  font-size: 14px;
}
.center {
  display: flex;
  justify-content: center;
}
.item {
  padding: 18px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.box-card {
  width: 170px;
  border-radius: 30px;
}
</style>
